<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    // 数组方法 from
    // from 可以将伪数组转换成真正的数组   1个参数
    // from 第二个参数 可以对元素进行处理


    function add() {
        console.log(arguments) // 伪数组
        let arr = Array.from(arguments)
        console.log(arr)
    }

    add(1, 2, 3)

    // 实际应用
    let lis = document.querySelectorAll('li')
    console.log('伪数组:', lis)
    console.log('用from转换:', Array.from(lis))
    console.log('用扩展运算符转换:', [...lis])

    // 第二个参数
    console.log('li标签中的文本值 :', Array.from(lis, ele => ele.textContent))


    // =====================================================================================================


    // 数组方法 of
    // of 将一组值转换成数组
    // 返回一个由参数值组成的数组，如果没有参数返回空数组
    console.log(Array.of(2, 4, 6, 8))
    console.log(Array.of())

    // Array.of() 基本上可以用Array()或 new Array()代替
    // ArrayOf也可以用如下代码来实现
    function ArrayOf() {
        return [].slice.call(arguments)
    }

    console.log(ArrayOf(1, 2, 3))
</script>
</body>
</html>
